<template>
  <div id="app">
    <div class="content">
        <div class="classify">
            <p v-for="(item) in data" :key="item.id" @click="active(item.id)">{{item.name}}</p>
        </div>
        <div class="list">
            <go-count v-for="item in list" :key="item.id" :item="item"></go-count>
        </div>
    </div>
    <div>
      总价：{{allPrice}},
      数量：{{allNum}},
      <button>清空</button>
    </div>
  </div>
</template>

<script>
import GoPopout from './components/go-popout'
import GoCount from './components/go-cont'  //子组件tap切换功能，内含添加组件

export default {
  name: 'App',
  components: { //注册组件
    GoPopout,
    GoCount
  },
  data(){
    return {
      data:[],
      list:[],
      type:1,
      arr:[],
      getLocal: JSON.parse(window.localStorage.getItem("num")) || []
    }
  },
  created(){
        this.$http.get("/classify").then(res => {
            if(res.data.code == 0){
                this.data = res.data.asg
            }
        }),
        this.$http.get("/list?type="+this.type).then(res => {
            if(res.data.code == 0){
                this.list = res.data.asg.map((item) => {
                    let ind = this.getLocal.findIndex(ele => {
                    return ele.id == item.id
                  })
                  if(ind != -1){
                      item.num = this.getLocal[ind].num
                  }else{
                    item.num = 0
                  }
                  return item
                })
            }
        })
        this.$bus.$on("add",(data) => {
         let index =  this.list.findIndex((item) => {
            return item.id == data.id
          })
          this.list[index].num = data.num
              let ind = this.getLocal.findIndex(item => {
              return item.id == data.id
            })
            if(ind == -1){            
             this.getLocal.push(this.list[index])
            }else{
              this.getLocal[ind].num = data.num
            }
              window.localStorage.setItem("num",JSON.stringify(this.getLocal))
          

        })
  },
  methods:{
    active(id){
      this.type = id
      this.$http.get("/list?type="+this.type).then(res => {
            if(res.data.code == 0){
                this.list = res.data.asg.map((item) => {
                  let ind =this.getLocal.findIndex(ele => {
                    return ele.id == item.id
                  })
                  if(ind != -1){
                      item.num = this.getLocal[ind].num
                  }else{
                    item.num = 0
                  }
                  
                  return item
                })
                console.log(this.list)
            }
      })
    }
  },
  computed:{
    allNum(){
     return this.getLocal.reduce((prev,next) => {
        return prev + next.num
      },0)
    },
    allPrice(){
      this.getLocal
      return this.getLocal.reduce((prev,next) => {
        return prev + next.price * next.num
      },0)
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
.content{
        width: 100%;
        height:80%;
        display:flex;
        padding:0 10px;
        .classify{
            width:80px;
            display:flex;
            flex-direction:column;
            p{
                padding:15px 0;
                text-align:center;
            }
        }
    }
</style>
